<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>Promise testDemo</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	
</style>
</head>
<body>
	<!-- 
	<img src="img1.jpg" id="img1" alt="" width="180">
	<img src="img2.jpg" id="img2" alt="" width="180">
 -->
	<script src="index.js"></script>
	<script type="text/javascript">
	/*
	img1.onload = function() {
		console.log(img1, '图片1加载完成')
	}
	img1.onerror = function() {
		console.log(img1, '图片1加载失败')
	}

	img2.onload = function() {
		console.log(img2, '图片2加载完成')
	}
	img2.onerror = function() {
		console.log(img2, '图片2加载失败')
	}
	*/

	function loadImage(file, resolve, reject) {
		  const image = new Image();
		  image.src = file;
		  image.width = 200
		  image.onload = () => {
		    resolve(image);
		  };
		  image.onerror = () => {
		    reject(new Error("load fail"));
		  };
		  document.body.appendChild(image);
	}
	loadImage("img1.jpg", image => {
		image.style.border = "solid 5px red";
	}, error => {
    console.log(error);
  })



	</script>
</body>
</html>